<template>
  <div class="pay">
    <template v-if="!showSuccess">
      <div class="pay-QR-code">
        <template v-if="isStaleDated">
          <div class="mask"></div>
          <img src="../assets/pay_staleDated.png" alt="提示用户验证码已过期" />
        </template>
        <img :src="QRImgUrl" alt="支付验证码" v-else />
        <div class="div" v-if="!isStaleDated">微信扫码支付</div>
        <div class="div" v-if="isStaleDated">请重新发送</div>
      </div>
      <!-- 倒计时 -->
      <div class="count-down">
        <van-count-down
          :time="QRInfo.time"
          millisecond
          @finish="staleDatedHandle"
          ref="countDown"
        >
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="resend-btn" @click="resend" v-if="isStaleDated">重新发送</div>
    </template>
    <template v-else>
      <div class="success-box">
        <el-result icon="success" title="支付成功" subTitle="请耐心等待配餐">
          <template slot="extra">
            <el-button type="primary" size="medium" @click="backHome"
              >返回主页</el-button
            >
          </template>
        </el-result>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { reFlushOrder, checkPayState } from '@/api/orderApi';
export default {
  name: "pay",
  created() {
    this.init();
  },
  data() {
    return {
      isStaleDated: false,
      showSuccess: false, // 是否支付成功
      timer: null
    };
  },
  methods: {
    ...mapMutations("m_user", ["setQRInfo", "setPayOrder"]),
    init() {
      let payInfo = this.$route.query.payInfo;
      if (this.payOrder) {
        // 如果为true, 说明没有订单需要支付。或者当页面刷新的时候redux数据就变为初始值了
        // 直接跳转到主页面
        this.$router.push("/");
        return;
      }

      if (Object.keys(this.QRInfo).length <= 0) {
        // undefined, 也就是路由直接跳转的, 展示目前空状态
        this.isStaleDated = true;
        return;
      }

      if (
        payInfo === "[object Object]" &&
        Object.keys(this.QRInfo).length <= 0
      ) {
        // 页面重新刷新了, 通知用户支付已过期, 并且有存在未支付订单, 需要重新支付
        // 展示一个提示二维码(支付过期请重新发送), 点击按钮重新发送, 重新生成二维码展示
        this.isStaleDated = true;

        return;
      }

      // 正常进行状态
      // 显示支付二维码, 倒计时支付时间
      // 轮询看是否用户支付成功
      this.timer = setInterval(async () => {
        let res = await checkPayState(this.QRInfo.orderId);
        console.log(res);
        if (res.data !== "NOTPAY") {
          // 说明用户支付成功
          clearInterval(this.timer); //轮询结束
          // 清楚支付二维码vuex数据
          this.setQRInfo({});
          // 显示支付成功提示
          this.showSuccess = true;
          // 说明当前没有可支付订单
          this.setPayOrder(true);
        }
      }, 3000);

      /**
       * 前端拿到这个data字符串后,有两种方式显示图片
         先拼接一下前缀, 分别是data:图片类型 ; 编码类型, data字符串数据
         1. background-image: url(......);
         2. <img width="900" height="450" src="...."/>
       */

      //   console.log(payInfo);
      //   console.log(this.$route.query.payInfosss);
    },
    async resend() {
      this.isStaleDated = false;
      let res = await reFlushOrder(this.QRInfo.orderId); // res.data返回的是二维码的base64
      console.log(res);
      this.setQRInfo({
        qrCode: res.data, // "二维码的base64字符串"
        orderId: this.QRInfo.orderId, // 订单号
        time: this.QRInfo.time,
      });
      this.init();
      // 重新倒计时
      this.$refs.countDown.reset();
    },
    staleDatedHandle() {
      // 倒计时结束
      this.isStaleDated = true;
      // 结束轮询的定时器
      clearInterval(this.timer);
    },
    backHome() {
      this.$router.push("/");
    },
  },
  computed: {
    ...mapState("m_user", ["QRInfo", "payOrder"]),
    QRImgUrl() {
      return `data:image/png;base64,${this.QRInfo.qrCode}`;
      //   return `https://img01.yzcdn.cn/vant/cat.jpeg`;
    },
  },
};
</script>

<style lang="scss">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.pay-QR-code {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.resend-btn {
  position: fixed;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 60px;
  border-radius: 10px;
  background-color: orangered;
  margin: 10px auto;
  font-size: 18px;
  color: #fff;
  z-index: 10;
}

.count-down {
  margin-top: 20px;
  text-align: center;
}

.success-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  .success {
  }
}
</style>
